<!DOCTYPE html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>i movie</title>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui-v2.5.6/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/iconfont/iconfont.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/nprogress.css">
</head>
<body>
<input type="text" name="title" id="title" required  lay-verify="required" placeholder="输入用户名进行搜索" autocomplete="off" class="layui-input" style="width: 500px;display: inline-block">
<button class="layui-btn layui-btn-primary" id="search">搜索</button>
<table class="layui-table">
    <colgroup>
        <col width="150">
        <col width="200">
        <col width="200">
    </colgroup>
    <thead>
    <tr>
        <th>用户名</th>
        <th>昵称</th>
        <th>昵称</th>
    </tr>
    </thead>
    <tbody id="userList">
    <c:forEach items="${users.list}" var="item">
        <tr>
            <td>${item.username}</td>
            <td>${item.nickname}</td>
            <td><c:if test="${item.is_staff==1}">
                <button class="layui-btn layui-btn-normal" onclick="changeStatus(${item.id},${item.is_staff},this)" data-staff="${item.is_staff}">取消管理员</button>
            </c:if>
                <c:if test="${item.is_staff==0}">
                    <button class="layui-btn layui-btn-danger" onclick="changeStatus(${item.id},${item.is_staff},this)" data-staff="${item.is_staff}">设为管理员</button>
                </c:if>
            </td>
        </tr>
    </c:forEach>
    </tbody>
</table>
<nav style="text-align: center">
    <ul class="detail-pager" id="pagination" ></ul>
    <ul class="detail-pager" id="pagination1" ></ul>
</nav>
<script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/layui-v2.5.6/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/js/nprogress.js"></script>
<script src="${pageContext.request.contextPath}/js/dayjs.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-paginator.js"></script>
<script src="${pageContext.request.contextPath}/js/template-web.js"></script>
<%--<script src="${pageContext.request.contextPath}/layer/layer.js"></script>--%>
<script>
    $(function () {
        layui.use(['table','layer'], function() {
            var table = layui.table;
            var layer = layui.layer;
            $('#search').click(function () {
                console.log(123)
                if($('#title').val()==''){
                    layer.msg('输入关键词');
                }else{
                    NProgress.start();
                    $('#pagination').remove();
                    $.ajax({
                        url:'${pageContext.request.contextPath}/backend/user/searchUser',
                        dataType: "json",
                        type:'POST',
                        data:{username:$('#title').val()},
                        success:function (data) {
                            console.log(data);
                            NProgress.done();
                            var html = template('temp1',{list:data.data.list});
                            $('#userList').html(html);
                            if(data.data.total!=0){
                                //$('#footer').removeClass('fix');
                                $('#pagination1').show();
                                $('#pagination1').bootstrapPaginator({
                                    //主版本号
                                    bootstrapMajorVersion: 3,
                                    //当前页
                                    currentPage: data.data.pageNum,
                                    //总页数
                                    totalPages: data.data.pages,

                                    //显示分页条信息
                                    itemTexts: function (type, page, current) {
                                        switch (type) {
                                            case "first":
                                                return "首页";
                                            case "prev":
                                                return "上一页";
                                            case "next":
                                                return "下一页";
                                            case "last":
                                                return "尾页";
                                            case "page":
                                                return page;
                                        }
                                    },
                                    onPageClicked:function (event, originalEvent, type, page) {
                                        $.ajax({
                                            url:'${pageContext.request.contextPath}/backend/user/searchUser',
                                            async:true,
                                            data:{username:$('#title').val(),pageNum:page},
                                            dataType: "json",
                                            type:'POST',
                                            success:function (data) {
                                                var html = template('temp1',{list:data.data.list});
                                                $('#userList').html(html);
                                                NProgress.done();
                                            }
                                        })
                                    },
                                });
                            }else{
                                $('#pagination1').hide();
                                $('#userList').html('<div style="margin-left: 30px;margin-top: 30px">暂无数据</div>');
                            }
                        }
                    })
                }
            })
        });
        if((${users.total})==0){
            $('#pagination').hide();
            $('#userList').html('<div style="margin-left: 30px;margin-top: 30px">暂无数据</div>');
        }else{
            $('#pagination').bootstrapPaginator({
                //主版本号
                bootstrapMajorVersion: 3,
                //当前页
                currentPage: ${users.pageNum},
                //总页数
                totalPages: ${users.pages},
                //请求url
                pageUrl: function (type, page, current) {
                    return '${pageContext.request.contextPath}/backend/user/user?pageNum='+page;
                },
                //显示分页条信息
                itemTexts: function (type, page, current) {
                    switch (type) {
                        case "first":
                            return "首页";
                        case "prev":
                            return "上一页";
                        case "next":
                            return "下一页";
                        case "last":
                            return "尾页";
                        case "page":
                            return page;
                    }
                },
            });
        }

    })
    function changeStatus(id,status,is) {
        let st = $(is).data('staff');
        console.log(id,st);
        $.ajax({
            url:'${pageContext.request.contextPath}/backend/user/changeRole',
            dataType: "json",
            type:'POST',
            data:{id:id,status:1-parseInt(st)},
            success:function (data) {
                console.log(data);
                if(parseInt(st)==0){
                    $(is).text('取消管理员');
                    $(is).removeClass('layui-btn-danger')
                    $(is).addClass('layui-btn-normal')
                    $(is).data('staff','1');
                }else {
                    $(is).text('设为管理员');

                    $(is).removeClass('layui-btn-normal')
                    $(is).addClass('layui-btn-danger')
                    $(is).data('staff','0');
                }
            }
        })
    }
</script>
<script type="text/html" id="temp1">
    {{each list item index}}
    <tr>
        <td>{{item.username}}</td>
        <td>{{item.nickname}}</td>
        <td>{{if item.is_staff==1}}
            <button class="layui-btn layui-btn-normal" data-staff="{{item.is_staff}}" onclick="changeStatus({{item.id}},{{item.is_staff}},this)">取消管理员</button>
            {{/if}}
            {{if item.is_staff==0}}
            <button class="layui-btn layui-btn-danger" data-staff="{{item.is_staff}}" onclick="changeStatus({{item.id}},{{item.is_staff}},this)">设为管理员</button>
            {{/if}}
        </td>
    </tr>
    {{/each}}
</script>
</body>
</html>
